<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 ref="title">{{msg}}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建 create ;挂载 mount

        //组件的生命周期钩子（函数）
        const app =Vue.createApp({
            data(){
                return{
                    msg:"hello world"
                }
            },
            //beforeCreate,created,beforeMount,mounted
            //beforeCreate : 实例完全被创建出来之前,会执行它，data和methods中的数据都还没有初始化，没有数据，也没有dom
            //created : data和methods都已经被初始化好了，所以有数据，但没挂载，所以没有dom
            //beforeMount ： 挂载之前，有数据，但没有dom
            //mounted ： 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,有dom也有数据

            beforeCreate(){
                console.log("创建前：");
                console.log(this.msg);
                console.log(this.$refs.title);
            },
            created(){
                console.log("创建完成：");
                console.log(this.msg);
                console.log(this.$refs.title);
            },
            beforeMount(){
                console.log("挂载前：");
                console.log(this.msg);
                console.log(this.$refs.title);
            },
            mounted(){
                console.log("挂载完成：");
                console.log(this.msg);
                console.log(this.$refs.title);
            },
        })

        app.mount("#app")
        
    </script>
</body>
</html>